<template>
  <div ref="userAdd">123</div>
  <!-- <Modal
    :closable="false"
    :loading="loading"
    @on-cancel="userCancel"
    @on-ok="userAddOk"
    id="userAdd"
    title="新增用户"
    v-model="modalSta"
  >
    <Row>
      <i-col :span="20">
        <Form
          :label-width="100"
          :model="userAddForm"
          :rules="userAddRule"
          label-position="right"
          ref="userAddForm"
        >
          <FormItem label="用户名:" prop="name">
            <i-input
              placeholder="请输入用户名"
              v-model="userAddForm.name"
            ></i-input>
          </FormItem>
          <FormItem label="密码:" prop="password">
            <i-input
              placeholder="请输入密码"
              v-model="userAddForm.password"
            ></i-input>
          </FormItem>
          <FormItem label="确认密码:" prop="verifyPassword">
            <i-input
              placeholder="请确认密码"
              v-model="userAddForm.verifyPassword"
            ></i-input>
          </FormItem>
          <FormItem label="所属区域:" prop="region">
            <Cascader
              :data="pcd"
              change-on-select
              v-model="userAddForm.region"
            ></Cascader>
          </FormItem>
        </Form>
      </i-col>
    </Row>
  </Modal> -->
</template>
<script>
export default {
  name: "UserAdd",
  props: {
    addSta: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 确认密码
    const verifyPasswordRuleFn = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认新密码"));
      } else if (value !== this.userAddForm.password) {
        callback(new Error("确认密码和密码不一致"));
      } else {
        callback();
      }
    };
    return {
      loading: true,
      // 模态框状态
      modalSta: this.addSta,
      // 省市区数据
      pcd: [],
      // 表单
      userAddForm: {
        name: "",
        password: "",
        verifyPassword: "",
        region: ""
      },
      // 规则
      userAddRule: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        verifyPassword: [
          {
            required: true,
            validator: verifyPasswordRuleFn,
            trigger: "blur"
          }
        ],
        region: [
          {
            required: true,
            message: "请选择权限所属区域",
            trigger: "change"
          }
        ]
      },
      // 新增模态框
      addModSta: false,
      // 详情模态框
      detailModSta: false
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    // 提交
    userAddOk() {
      let _self = this;
      this.$refs["userAddForm"].validate(valid => {
        if (valid) {
          setTimeout(() => {
            let obj = {
              name: this.userAddForm.name,
              password: this.userAddForm.password,
              region: this.userAddForm.region || 370800
            };
            this.$axios.post("/user", obj).then(res => {
              console.log("res", res);
              _self.$emit("changeAddSta", {
                name: "xxx"
              }); // 关闭模态框
              _self.$refs["userAddForm"].resetFields(); // 清空表单
            });
          }, 1000);
        } else {
          this.loading = false; // 动画
        }
      });
    },
    // 取消
    userCancel() {
      this.$Message.error("取消");
    }
  },
  watch: {
    addSta(n) {
      this.modalSta = n;
    }
  }
};
</script>
